<template>
    <fieldset>
        <legend>登入页</legend>
        用户名：
        <input type="text" v-model="username">
        <br>
        密码：
        <input type="text" v-model="password" @keydown.enter="login">
        <button @click="login">登入</button>
    </fieldset>
</template>
<script setup>
import {ref} from "vue"
import * as api from "../../api/users"
import {useRouter} from "vue-router"
//1.获取输入框中的用户名和密码
let username=ref("")
let password=ref("")

let router=useRouter()

//2.发起请求，请求登录
let login=async()=>{
   let res=await api.loginApi(username.value,password.value)

   //服务器会返回token,这个token是令牌，这个令牌需要保存在本地，后续请求的时候带上令牌，就能随意访问服务器的数据

   //localStorage:关掉页面，只要token还具备时效性，就能访问其他页面，不需要重新登陆
//    sessionStorage用户关掉页面token就被清除，需要重新登陆

    if(res.data.state){
        //登陆成功
    sessionStorage.setItem('token',res.data.token)
    //页面进行跳转
    router.push("/")
    }else{
        alert(res.data.msg)
    }
   console.log(res);
}
//3.判定请求成功和请求失败的情况
</script>